<template>
  <div class="hello">
    <div  :style="{height: `${height}px`}" id="container"></div>
  </div>
</template>

<script>
 const AMap=window.AMap
 const arrer=[]
 const arr=[]
export default {
  name: 'HelloWorld',
  
  props: {
    mapclick: {
      type: Function
    },
    Label: {
      type: Array
    },
    yuan: {
      type: Array
    },
    height: {
      type: Number,
      default: 300
    },
    Zoom:{
      type: Array
    }
  },
  watch:{
    Label(v) {
      this.Geocoding(v);
     
    },
    yuan(v) {
      this.yuand(v);
    },
    Zoom(v){
      this.zomm(v)
    }
  },
  beforeDestroy() {
    //销毁事件销毁地图
    this.map.destroy( );
  },
  mounted(){
    this.creat()
    this.start();
  },
  methods:{
    creat(){
      this.map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        zoom:13,
        resizeEnable: true,
      })
    },
    start(){
      let self = this;
      this.map.on('click',function(e){
        const length=e.lnglat.lng+','+e.lnglat.lat
        var geocoder = new AMap.Geocoder();
            var lnglat  = length.split(',');
            geocoder.getAddress(lnglat,  function(status, result) {
              if (status === 'complete'&&result.regeocode) {
                var address = result.regeocode.formattedAddress;
               self.mapclick({'jingwei':lnglat,'address':address})
            }else{
                log.error('根据经纬度查询地址失败')
            }
        });
        
    })
    },
          
        Geocoding() {
      if(this.Label){
        if(this.marker!=undefined){
         for(let l of arrer){

           this.map.remove(l) 
         }
          
          for (let i in this.Label) {
            this.marker = new AMap.Marker({
            content: '<div class="mark">' + i + "</div>",
            position: new AMap.LngLat(this.Label[i][0], this.Label[i][1])
          });
          arrer.push(this.marker)
          this.map.add(this.marker);
        }
        }else{
          for (let i in this.Label) {
            this.marker = new AMap.Marker({
              content: '<div class="mark">' + i + "</div>",
            position: new AMap.LngLat(this.Label[i][0], this.Label[i][1])
          });
          arrer.push(this.marker)
          this.map.add(this.marker);
        }
        }
      }
    },
     citys(m){
       const val=m
       console.log(val)
      if (!val) {
        this.val = "北京市";
      }
       this.map.setCity(val);
      // log.info(`已跳转至${val}`);
    },
    yuand(){
       if(this.yuan){
        if(arr!=null){
          console.log(123)
         for(let l of arr){

           this.map.remove(l) 
         }
           for(let i of this.yuan){

        const lnglat=i[0]+','+i[1]
        var center=lnglat.split(',');
        var bj =i[2]
        console.log(bj)
      
       var searchOptions = {
        map:  this.map,
        panel: 'panel',
        keywords: '',
        pageSize: 5,
        orderBy: '_id:ASC'
    };
    var circle = new AMap.Circle({
    center: center, // 圆心位置
    radius: bj,  //半径
    strokeColor: "#A0DDFE",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 2,  //线粗细度
    fillColor: "#A0DDFE",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});
    //中心点位置
    var icon = new AMap.Icon({
        size: new AMap.Size(20, 30),    // 图标尺寸
        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',  // Icon的图像
        imageSize: new AMap.Size(20, 30)   // 根据所设置的大小拉伸或压缩图片
    });
    var marker = new AMap.Marker({
        icon: icon,
        position: center,
        offset: new AMap.Pixel(-10, -10)
    });
    marker.setMap( this.map);
     arr.push([marker,circle])
     this.map.add([marker,circle]);
         
        }
        }else{
          console.log(456)
      for(let i of this.yuan){

        const lnglat=i[0]+','+i[1]
        var centers=lnglat.split(',');
        var bjs =i[2]
        console.log(bjs)
      
       var searchOptionss = {
        map:  this.map,
        panel: 'panel',
        keywords: '',
        pageSize: 5,
        orderBy: '_id:ASC'
    };
    var circles = new AMap.Circle({
    center: centers, // 圆心位置
    radius: bjs,  //半径
    strokeColor: "#A0DDFE",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 2,  //线粗细度
    fillColor: "#A0DDFE",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});
    //中心点位置
    var icons = new AMap.Icon({
        size: new AMap.Size(20, 30),    // 图标尺寸
        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',  // Icon的图像
        imageSize: new AMap.Size(20, 30)   // 根据所设置的大小拉伸或压缩图片
    });
    var markers = new AMap.Marker({
        icon: icons,
        position: centers,
        offset: new AMap.Pixel(-10, -10)
    });
    markers.setMap( this.map);
     arr.push([markers,circles])
     this.map.add([markers,circles]);
      }
        }
       }
    },
    zomm(){
      var mybounds = new AMap.Bounds(this.Zoom[0], this.Zoom[1]);
      this.map.setBounds(mybounds);
    }
  }
}
</script>

<style>
#container {width:100%; }  
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }
.mark{
            width:19px;
            height: 31px;
            color:white;
            text-align: center;
            line-height: 21px;
            background: url('https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png');
        }
</style>
